<template>
    <div class="page">
        <!-- 导航 开始 -->
        <nav-bar title="医院详情"></nav-bar>
        <!-- 导航 end -->

        <!-- 头部 开始 -->
        <div class="head" ref="baseInfo">
            <h2 class="h2">{{ hospital.name }}</h2>
            <div class="tags">
                <div class="cell" v-for="(item, index) in getLabels(hospital.expertProjectNames)" :key="`label_${index}`">{{
                    item }}</div>
                <!-- <div class="cell">隐形矫正</div>
                <div class="cell">根管治疗</div> -->
            </div>
        </div>
        <!-- 头部 end -->

        <!-- 菜单 开始 -->
        <van-sticky @change="onChange">
            <div class="menus">
                <!-- <div class="cell" :class="menuActive == item.id ? 'cell_active' : ''" v-for="(item, index) in menus"
                :key="index">{{ item.name }}</div> -->
                <tab-menus :list="menus" v-model="menuActive" @click="menuEvent"></tab-menus>
            </div>
        </van-sticky>
        <!-- <div class="menu_box_hidden" v-if="isFixed"></div> -->
        <!-- 菜单 end -->

        <!-- 基础信息 开始 -->
        <div class="base_info">
            <div class="title">基础信息</div>
            <div class="content">
                <div class="info">
                    <div class="cell">
                        <span class="name">诊室个数：</span>
                        <span class="txt">{{ hospital.outpatientRootCnt }}间</span>
                    </div>
                    <div class="cell">
                        <span class="name">门店面积：</span>
                        <span class="txt">{{ hospital.outpatientArea }}㎡</span>
                    </div>
                    <div class="cell">
                        <span class="name">成立时间：</span>
                        <span class="txt">{{ hospital.establishDate }}年</span>
                    </div>
                    <div class="cell">
                        <span class="name">牙椅数量：</span>
                        <span class="txt">{{ hospital.toothChairCnt }}张</span>
                    </div>
                    <div class="cell">
                        <span class="name">机构类别：</span>
                        <span class="txt">{{ hospital.className }}</span>
                    </div>
                    <div class="cell">
                        <span class="name">医保政策：</span>
                        <span class="txt">{{ hospital.medicalInsurancePolicy == 1 ? '支持医保' : '不支持医保' }}</span>
                    </div>
                    <div class="cell long_cell">
                        <span class="name">机构简介：</span>
                        <span class="txt">{{ hospital.introduce }}</span>
                    </div>
                </div>
            </div>
        </div>
        <!-- 基础信息 end -->

        <!-- 医院资质 开始 -->
        <div class="base_info" ref="hosp">
            <div class="title">医院资质</div>
            <div class="content">

                <!-- 营业执照 开始 -->
                <div class="sigle_box">
                    <h2 class="h2_title">营业执照</h2>
                    <div class="certification">
                        <div class="img_box">
                            <!-- <img src="@/assets/images/h_banner.png" alt=""> -->
                            <template v-if="qualification.businessLicense && qualification.businessLicense.length">
                                <li-image :src="item" v-for="(item, index) in (qualification.businessLicense || [])"
                                    :key="index"></li-image>
                            </template>
                            <img src="@/assets/images/h_banner.png" alt="" v-else>
                        </div>
                        <div class="cell_right_box">
                        <div class="cell_list">
                            <div class="cell_box">
                                <div class="name">营业期限：</div>
                                <div class="txt">{{ qualification.businessTerm }}</div>
                            </div>
                            <div class="cell_box">
                                <div class="name">法人：</div>
                                <div class="txt">{{ qualification.legalPerson }}</div>
                            </div>
                        </div>
                        <div class="cell_list">
                            <div class="cell_box">
                                <div class="name">统一社会编码：</div>
                                <div class="txt">{{ qualification.businessLicenseNumber }}</div>
                            </div>
                            <div class="cell_box">
                                <div class="name">注册资金：</div>
                                <div class="txt">{{ qualification.registeredCapital }}</div>
                            </div>
                        </div>
                    </div>
                    </div>
                    <div class="cell_box">
                        <div class="name">经营范围：</div>
                        <div class="txt" v-html="qualification.businessScope"></div>
                    </div>
                </div>
                <!-- 营业执照 end -->

                <!-- 医疗许可证 开始 -->
                <div class="sigle_box">
                    <h2 class="h2_title">医疗许可证</h2>
                    <div class="certification">
                        <div class="img_box">
                            <template v-if="qualification.practiceLicense && qualification.practiceLicense.length">
                                <li-image :src="item" v-for="(item, index) in (qualification.practiceLicense || [])"
                                    :key="index"></li-image>
                            </template>
                            <img src="@/assets/images/h_banner.png" alt="" v-else>
                        </div>
                        <div class="cell_list">
                            <div class="cell_box">
                                <div class="name">证件有效期：</div>
                                <div class="txt">{{ qualification.licenseValidity }}</div>
                            </div>
                            <div class="cell_box">
                                <div class="name">医院资质：</div>
                                <div class="txt">{{ qualification.hospitalQualification }}</div>
                            </div>
                        </div>
                    </div>
                    <div class="cell_box">
                        <div class="name">诊疗科目：</div>
                        <div class="txt" v-html="qualification.treatmentSubject"></div>
                    </div>
                </div>
                <!-- 医疗许可证 end -->


            </div>


        </div>
        <!-- 医院资质 end -->


        <!-- 开展项目 开始 -->
        <div class="base_info" ref="project">
            <div class="title">开展项目</div>
            <div class="content">
                <div class="tags_list">
                    <div class="cell" v-for="(item, index) in (hospital.expertProjects || [])" :key="`project_${index}`">
                        <li-image :src="item.icon" class="img" v-if="item.icon" />
                        <img src="@/assets/images/icon/icon_01.png" class="img" alt="" v-else>
                        <span>{{ item.name }}</span>
                    </div>
                </div>
            </div>
        </div>
        <!-- 开展项目 end -->

        <!-- 特色服务 开始 -->
        <div class="base_info" ref="service">
            <div class="title">特色服务</div>
            <div class="content">
                <div class="tags_list">
                    <div class="cell" v-for="(item, index) in (hospital.featuredServices || [])" :key="`service_${index}`">
                        <li-image :src="item.icon" class="img" v-if="item.icon" />
                        <img src="@/assets/images/service/icon_01.png" class="img" alt="" v-else>
                        <span>{{ item.name }}</span>
                    </div>
                </div>
            </div>
        </div>
        <!-- 特色服务 end -->

        <!-- 更多信息 开始 -->
        <div class="base_info" ref="moreInfo">
            <div class="title">更多信息</div>
            <div class="content">
                <div class="more_info" v-html="surroundings.outpatientIntroduce">

                </div>
            </div>
        </div>
        <!-- 更多信息 end -->





    </div>
</template>
<script>
import TabMenus from '@/components/menus/index.vue';
import { GET_HOSPITAL_INFO } from "@/http/interface";
import { ImagePreview, Swipe, SwipeItem, Sticky } from "vant";
export default {
    components: {
        TabMenus,
        [Swipe.name]: Swipe,
        [SwipeItem.name]: SwipeItem,
        [Sticky.name]: Sticky,
    },
    data() {
        return {
            menus: [
                { name: '基础信息', id: 1, target: 'baseInfo' },
                { name: '医院资质', id: 2, target: 'hosp' },
                { name: '开展项目', id: 3, target: 'project' },
                { name: '特色服务', id: 4, target: 'service' },
                { name: '更多信息', id: 5, target: 'moreInfo' },
            ],
            menuActive: 1,
            hospitalId: '',
            appointment: {},
            hospital: {},
            surroundings: {},
            qualification:{},
            title: "",
            description: "",
            keywords: "",
            isFixed: false
        }
    },
    head() {
        return {
            title: this.title,
            meta: [
                {
                    hid: "description",
                    name: "description",
                    content: this.description,
                },
                {
                    hid: "Keywords",
                    name: "Keywords",
                    content: this.keywords,
                },
            ],
            link: [
        {
          ref: "canonical",
          href: `${this.$domain}/hospital/base?id=${this.hospitalId}`,
        },
      ],
        };
    },
    async asyncData({ query, $axios }) {
        let params = { id: query.id }
        let res = await $axios.get(GET_HOSPITAL_INFO, {
            params: params,
        });

        let oInfo = res.data || {};
        let appointment = oInfo.appointment || {};
        let hospital = oInfo.hospital || {};
        let surroundings = oInfo.surroundings || {};
        let qualification = oInfo.qualification || {}

        return {
            hospitalId: query.id,
            appointment,
            hospital,
            surroundings,
            qualification,
            title: hospital.seoTitle,
            keywords: hospital.seoKeywords,
            description: hospital.seoDescription,
        };
    },
    methods: {

        // 获取项目
        getLabels(str) {
            if (!str) {
                return []
            }
            let arr = str.split(',');
            return arr;
        },

        menuEvent(row) {
            let _target = row.target;
            let _dom = this.$refs[_target];
            if (_dom) {
                _dom.scrollIntoView();
            }
            this.menuActive = row.id;
        },

        //
        onChange(e) {
            console.log(e);
            this.isFixed = e;
        },

    }
}
</script>
<style lang="less" scoped>
@import '/assets/styles/hospital/base.less';
</style>